<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title>Document</title>
</head>
<style>
    body {
        margin: 0;
        height: 100vh;
        background: url('./static/image/bg.png');
        background-size: 100% 100%;
    }
    .pingzi{
        background: url('./static/image/pingzi.png');
        background-size: 100% 100%;
        width: 66px;
        height:255px;
        position: fixed;
        left: calc( 50vw - 33px);
        top: 35vh;
    }
    .pingzi>div{
        width:50%;
        height: 51px;
        float: left;
    }
    .qiepian>div{
        width: 33px;
        height:51px;
        position: fixed;
    }

    .qiepian>div:nth-child(1){
        top: calc(100vh - 150px);
        left: calc(10vw - 16px);
    }
    .qiepian>div:nth-child(2){
        top: calc(100vh - 150px);
        left: calc(30vw - 16px);
    }
    .qiepian>div:nth-child(3){
        top: calc(100vh - 150px);
        left: calc(50vw - 16px);
    }
    .qiepian>div:nth-child(4){
        top: calc(100vh - 150px);
        left: calc(70vw - 16px);
    }
    .qiepian>div:nth-child(5){
        top: calc(100vh - 150px);
        left: calc(90vw - 16px);
    }


    .qiepian>div:nth-child(6){
        top: calc(100vh - 75px);
        left: calc(10vw - 16px);
    }
    .qiepian>div:nth-child(7){
        top: calc(100vh - 75px);
        left: calc(30vw - 16px);
    }
    .qiepian>div:nth-child(8){
        top: calc(100vh - 75px);
        left: calc(50vw - 16px);
    }
    .qiepian>div:nth-child(9){
        top: calc(100vh - 75px);
        left: calc(70vw - 16px);
    }
    .qiepian>div:nth-child(10){
        top: calc(100vh - 75px);
        left: calc(90vw - 16px);
    }

    .qiepian>.t01{
        background: url('./static/image/pz01.png');
        background-size: 100% 100%;
    }
    .qiepian>.t02{
        background: url('./static/image/pz02.png');
        background-size: 100% 100%;
        
    }
    .qiepian>.t03{
        background: url('./static/image/pz03.png');
        background-size: 100% 100%;
    }
    .qiepian>.t04{
        background: url('./static/image/pz04.png');
        background-size: 100% 100%;
    }
    .qiepian>.t05{
        background: url('./static/image/pz05.png');
        background-size: 100% 100%;
    }
    .qiepian>.t06{
        background: url('./static/image/pz06.png');
        background-size: 100% 100%;
    }
    .qiepian>.t07{
        background: url('./static/image/pz07.png');
        background-size: 100% 100%;
        
    }
    .qiepian>.t08{
        background: url('./static/image/pz08.png');
        background-size: 100% 100%;
    }
    .qiepian>.t09{
        background: url('./static/image/pz09.png');
        background-size: 100% 100%;
    }
    .qiepian>.t10{
        background: url('./static/image/pz10.png');
        background-size: 100% 100%;
    }
    .btn-sub{
        width: 26vw;
        line-height: 40px;
        background-color: #fff;
        border-radius: 40px;
        text-align: center;
        color: #003684;
        font-size: 20px;
        font-weight: bold;
        padding: 0 2vw;
        position: fixed;
        bottom: 10px;
        left: calc( 50vw - 15vw);
    }
    .hide{
        display: none;
    }
</style>

<body>

    <div class="pingzi">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="qiepian">
        <div class="t01" data-touch="touch01" data-num="1"></div>
        <div class="t07" data-touch="touch07" data-num="7"></div>
        <div class="t08" data-touch="touch08" data-num="8"></div>
        <div class="t02" data-touch="touch02" data-num="2"></div>
        <div class="t03" data-touch="touch03" data-num="3"></div>
        <div class="t09" data-touch="touch09" data-num="9"></div>
        <div class="t10" data-touch="touch10" data-num="10"></div>
        <div class="t04" data-touch="touch04" data-num="4"></div>
        <div class="t05" data-touch="touch05" data-num="5"></div>
        <div class="t06" data-touch="touch06" data-num="6"></div>
    </div>
    <div class="btn-sub hide"> 点击提交 </div>
</body>
<script>
    //禁用回弹
    document.body.addEventListener('touchmove', function (e) {
        e.preventDefault()
    }, { passive: false })

    var pinObj={
        p01:'',
        p02:'',
        p03:'',
        p04:'',
        p05:'',
        p06:'',
        p07:'',
        p08:'',
        p09:'',
        p10:'',
    };

    var div1 = $('.pingzi>div:nth-child(1)').offset()
    var div2 = $('.pingzi>div:nth-child(2)').offset()
    var div3 = $('.pingzi>div:nth-child(3)').offset()
    var div4 = $('.pingzi>div:nth-child(4)').offset()
    var div5 = $('.pingzi>div:nth-child(5)').offset()
    var div6 = $('.pingzi>div:nth-child(6)').offset()
    var div7 = $('.pingzi>div:nth-child(7)').offset()
    var div8 = $('.pingzi>div:nth-child(8)').offset()
    var div9 = $('.pingzi>div:nth-child(9)').offset()
    var div10 = $('.pingzi>div:nth-child(10)').offset()

    var touch01 = $('.t01').position()
    var touch02 = $('.t02').position()
    var touch03 = $('.t03').position()
    var touch04 = $('.t04').position()
    var touch05 = $('.t05').position()
    var touch06 = $('.t06').position()
    var touch07 = $('.t07').position()
    var touch08 = $('.t08').position()
    var touch09 = $('.t09').position()
    var touch10 = $('.t10').position()

    var x = 0;
    var y = 0;
    var p = {};
    $('.qiepian>div').on("touchstart", function (e) {
        p = $(this).position()
        var touch = e.targetTouches[0];
        x = touch.pageX;
        y = touch.pageY;
    })
    $('.qiepian>div').on("touchmove", function (e) {
        var touch = e.targetTouches[0];
        var disX = p.left + touch.pageX - x;
        var disY = p.top + (touch.pageY - y);
        $(this).css({
            left: disX + "px",
            top: disY + "px"
        });
    });
    $('.qiepian>div').on("touchend", function (e) {
        var num=eval($(this).data('touch'));
        var dataNum=eval($(this).data('num'));
        var touch = e.changedTouches[0];
        var disX = p.left + touch.pageX - x;
        var disY = p.top + (touch.pageY - y);
        var ll = num.left + "px";
        var tt = num.top + "px";
        var fanwei = 10
        if (disX > div1.left - fanwei && disX < div1.left + fanwei) {
            if (disY > div1.top - fanwei && disY < div1.top + fanwei) {
                ll = div1.left + "px";
                tt = div1.top + "px";
                pinObj.p01=dataNum+'';
            }
            else if (disY > div3.top - fanwei && disY < div3.top + fanwei) {
                ll = div3.left + "px";
                tt = div3.top + "px";
                pinObj.p03=dataNum+'';
            }
            else if (disY > div5.top - fanwei && disY < div5.top + fanwei) {
                ll = div5.left + "px";
                tt = div5.top + "px";
                pinObj.p05=dataNum+'';
            }
            else if (disY > div7.top - fanwei && disY < div7.top + fanwei) {
                ll = div7.left + "px";
                tt = div7.top + "px";
                pinObj.p07=dataNum+'';
            }
            else if (disY > div9.top - fanwei && disY < div9.top + fanwei) {
                ll = div9.left + "px";
                tt = div9.top + "px";
                pinObj.p09=dataNum+'';
            }
        } 
        else if(disX > div2.left - fanwei && disX < div2.left + fanwei){
            if (disY > div2.top - fanwei && disY < div2.top + fanwei) {
                ll = div2.left + "px";
                tt = div2.top + "px";
                pinObj.p02=dataNum+'';
            }
            else if (disY > div4.top - fanwei && disY < div4.top + fanwei) {
                ll = div4.left + "px";
                tt = div4.top + "px";
                pinObj.p04=dataNum+'';
            }
            else if (disY > div6.top - fanwei && disY < div6.top + fanwei) {
                ll = div6.left + "px";
                tt = div6.top + "px";
                pinObj.p06=dataNum+'';
            }
            else if (disY > div8.top - fanwei && disY < div8.top + fanwei) {
                ll = div8.left + "px";
                tt = div8.top + "px";
                pinObj.p08=dataNum+'';
            }
            else if (disY > div10.top - fanwei && disY < div10.top + fanwei) {
                ll = div10.left + "px";
                tt = div10.top + "px";
                pinObj.p10=dataNum+'';
            }
        }
        $(this).css({
                left: ll,
                top: tt,
            });
        x = 0
        y = 0
        check()
    });

    function check(){
        console.log(pinObj)
        if(pinObj.p01!=''&&pinObj.p02!=''&&pinObj.p03!=''&&pinObj.p04!=''&&pinObj.p05!=''&&pinObj.p06!=''&&pinObj.p07!=''&&pinObj.p08!=''&&pinObj.p09!=''&&pinObj.p10!=''){
            if(pinObj.p01=='1'&&pinObj.p02=='2'&&pinObj.p03=='3'&&pinObj.p04=='4'&&pinObj.p05=='5'&&pinObj.p06=='6'&&pinObj.p07=='7'&&pinObj.p08=='8'&&pinObj.p09=='9'&&pinObj.p10=='10'){
                alert('成功')
                $('.btn-sub').removeClass('hide')
            }else{
                alert('失败')
                window.location.reload();
            }
        }
    }
</script>

</html>